<script setup>
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import {
    Odometer,
    Goods,
    User,
    Ticket,
    Document,
    Picture,
} from '@element-plus/icons-vue';

const route = useRoute();
const activeMenu = ref(route.path);

// 监听路由变化，更新菜单选中状态
watch(
    () => route.path,
    (newPath) => {
        activeMenu.value = newPath;
    }
);
</script>

<template>
    <el-container class="h-screen">
        <!-- 左侧导航 -->
        <el-aside width="200px" class="bg-gray-100">
            <el-menu :default-active="activeMenu" class="h-full" router>
                <el-menu-item index="/control">
                    <el-icon>
                        <Odometer />
                    </el-icon>
                    <span>首页概览</span>
                </el-menu-item>
                <el-menu-item index="/control/goodsManage">
                    <el-icon>
                        <Goods />
                    </el-icon>
                    <span>商品管理</span>
                </el-menu-item>
                <el-menu-item index="/control/userManage">
                    <el-icon>
                        <User />
                    </el-icon>
                    <span>用户管理</span>
                </el-menu-item>
                <el-menu-item index="/control/couponManage">
                    <el-icon>
                        <Ticket />
                    </el-icon>
                    <span>优惠券管理</span>
                </el-menu-item>
                <el-menu-item index="/control/orderManage">
                    <el-icon>
                        <Document />
                    </el-icon>
                    <span>订单管理</span>
                </el-menu-item>
                <el-menu-item index="/control/bannerManage">
                    <el-icon>
                        <Picture />
                    </el-icon>
                    <span>轮播图管理</span>
                </el-menu-item>
            </el-menu>
        </el-aside>

        <!-- 右侧内容 -->
        <el-container>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<style lang="scss" scoped>
.h-full {
    height: 750px;
}
</style>